<!DOCTYPE html>
<html>

<head lang='zh'>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
	<title>Luckysheet</title>

	<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
	<link rel='stylesheet' href='./plugins/plugins.css' />
	<link rel='stylesheet' href='./css/luckysheet.css' />
	<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
	<link rel='stylesheet' href='./assets/iconfont2/iconfont.css' />
	<script src="./plugins/js/plugin.js"></script>

	<!-- rollup luckysheet.js -->
	<script src="./luckysheet.umd.js"></script>
	<script src="./luckyexcel.umd.js"></script>

</head>

<body>
	<!-- Non-full screen test -->
	<!-- <div style="position: relative;width: 100%;height: 100%;">

		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
	</div> -->

	<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;">
	</div>
	<!-- demo feature, non-production use -->
	<script src="./demoData/demoFeature.js"></script>
	<script src="./demoData/sheetFormula.js"></script>
	<script src="./demoData/sheetCell.js"></script>
	<script src="./demoData/sheetConditionFormat.js"></script>
	<script src="./demoData/sheetTable.js"></script>
	<script src="./demoData/sheetComment.js"></script>
	<script src="./demoData/sheetPivotTableData.js"></script>
	<script src="./demoData/sheetPivotTable.js"></script>
	<script src="./demoData/sheetSparkline.js"></script>
	<script src="./demoData/sheetChart.js"></script>
	<script src="./demoData/sheetPicture.js"></script>
	<script src="./demoData/sheetDataVerification.js"></script>

	<script>
		// import sheetFormula from './demoData/sheetFormula.js'
		// import sheetCell from './demoData/sheetCell.js'
		// import sheetConditionFormat from './demoData/sheetConditionFormat.js'
		// import sheetTable from './demoData/sheetTable.js'
		// import sheetComment from './demoData/sheetComment.js'
		// import sheetPivotTableData from './demoData/sheetPivotTableData.js'
		// import sheetPivotTable from './demoData/sheetPivotTable.js'
		// import sheetSparkline from './demoData/sheetSparkline.js'
		// import sheetChart from './demoData/sheetChart.js'
		// import sheetPicture from './demoData/sheetPicture.js'
		// import sheetDataVerification from './demoData/sheetDataVerification.js'

		$(function () {
			// luckysheet.createSheet({});
			// According to the browser language
			// var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
			// var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
			// var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
			// var options = null;

			// if (isShare || gridKey) {
			// 	// http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
			// 	if (!gridKey) {
			// 		alert('If gridKey is not provided in the address bar, please add it in the source code')
			// 	}
			// 	options = {
			// 		container: "luckysheet",
			// 		lang: lang,
			// 		allowUpdate: true,
			// 		updateImageUrl: location.origin + "/luckysheet/api/updateImg",
			// 		updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
			// 		gridKey: gridKey,
			// 		loadUrl: location.origin + "/luckysheet/api/load",
			// 		loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
			// 	}
			// } else {
			// 	// http://localhost:3000/ 
			// 	options = {
			// 		container: 'luckysheet',
			// 		lang: lang,
			// 		//配置后端地址
			// 		saveUrl : location.origin + "/admin-api/report/manage/savefile",
			// 		title:"这是一个好看的报表",
			// 		forceCalculation: false,
			// 		plugins: [{ name: 'chart' }, {
			// 			name: 'print', config: {
			// 				license: ''
			// 			}
			// 		}],
			// 		fontList: [
			// 			{
			// 				"fontName": "HanaleiFill",
			// 				"url": "./assets/iconfont/HanaleiFill-Regular.ttf"
			// 			},
			// 			{
			// 				"fontName": "Anton",
			// 				"url": "./assets/iconfont/Anton-Regular.ttf"
			// 			},
			// 			{
			// 				"fontName": "Pacifico",
			// 				"url": "./assets/iconfont/Pacifico-Regular.ttf"
			// 			}
			// 		],
			// 		hook: {
			// 			cellDragStop: function (cell, postion, sheetFile, ctx, event) {
			// 				// console.info(cell, postion, sheetFile, ctx, event);
			// 			},
			// 			rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
			// 				// console.log(rowNum);
			// 			},
			// 			rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
			// 				// console.log(ctx);
			// 			},
			// 			columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
			// 				// console.log(columnAbc);
			// 			},
			// 			columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
			// 				// console.log(postion);
			// 			},
			// 			cellRenderBefore: function (cell, postion, sheetFile, ctx) {
			// 				// console.log(cell,postion,sheetFile,ctx);
			// 			},
			// 			cellRenderAfter: function (cell, postion, sheetFile, ctx) {
			// 				// console.log(postion);
			// 			},
			// 			cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
			// 				// console.log(postion);
			// 			},
			// 			cellMousedown: function (cell, postion, sheetFile, ctx) {
			// 				// console.log(sheetFile);
			// 			},
			// 			sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
			// 				// console.log(cell,postion,sheetFile,moveState,ctx);
			// 			},
			// 			sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
			// 				// console.log(cell,postion,sheetFile,moveState,ctx);
			// 			},
			// 			cellAllRenderBefore: function (data, sheetFile, ctx) {
			// 				// console.info(data,sheetFile,ctx)
			// 			},
			// 			updated: function (operate) {
			// 				// console.info(operate)
			// 			},
			// 			cellUpdateBefore: function (r, c, value, isRefresh) {
			// 				// console.info('cellUpdateBefore',r,c,value,isRefresh)
			// 			},
			// 			cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
			// 				// console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
			// 			},
			// 			sheetActivate: function (index, isPivotInitial, isNewSheet) {
			// 				// console.info(index, isPivotInitial, isNewSheet)
			// 			},
			// 			rangeSelect: function (index, sheet) {
			// 				// console.info(index, sheet)
			// 			},
			// 			commentInsertBefore: function (r, c) {
			// 				// console.info(r, c)
			// 			},
			// 			commentInsertAfter: function (r, c, cell) {
			// 				// console.info(r, c, cell)
			// 			},
			// 			commentDeleteBefore: function (r, c, cell) {
			// 				// console.info(r, c, cell)
			// 			},
			// 			commentDeleteAfter: function (r, c, cell) {
			// 				// console.info(r, c, cell)
			// 			},
			// 			commentUpdateBefore: function (r, c, value) {
			// 				// console.info(r, c, value)
			// 			},
			// 			commentUpdateAfter: function (r, c, oldCell, newCell) {
			// 				// console.info(r, c, oldCell, newCell)
			// 			},
			// 			cellEditBefore: function (range) {
			// 				// console.info(range)
			// 			},
			// 			workbookCreateAfter: function (json) {
			// 				// console.info(json)
			// 			},
			// 			rangePasteBefore: function (range, data) {
			// 				// console.info('rangePasteBefore',range,data)
			// 				// return false; //Can intercept paste
			// 			},
			// 		},
			// 		data:[sheetCell]
			// 	}
			// }
			// options.loading = {
			// 	image: () => {
			// 		return `<svg viewBox="25 25 50 50" class="circular">
			// 		<circle cx="50" cy="50" r="20" fill="none"></circle>
			// 		</svg>`
			// 	},
			// 	imageClass: "loadingAnimation"
			// }
			// options.cellRightClickConfig = {
			// 	customs: [{
			// 		title: 'test',
			// 		onClick: function (clickEvent, event, params) {
			// 			console.log('function test click', clickEvent, event, params)
			// 		}
			// 	}]
			// }
			// luckysheet.create(options);
		})
	</script>
	<style>
		/* 自定义loading演示样式 */
		@keyframes loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-dash {
			0% {
				stroke-dasharray: 1, 200;
				stroke-dashoffset: 0;
			}

			50% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -40px;
			}

			100% {
				stroke-dasharray: 90, 150;
				stroke-dashoffset: -120px;
			}
		}

		.loadingAnimation {
			width: 3em;
			height: 3em;
			animation: loading-rotate 2s linear infinite;
		}

		.loadingAnimation circle {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: currentColor;
			stroke-linecap: round;
		}
	</style>
</body>

</html>